<template>
  <!-- 便签新增/编辑区 -->
  <div>
    <div class="cover-layer"></div>
    <div id="new-markdown"
         class="editor-layer">
      <div class="editor-top">
        <input class="editor-title form-control"
               type="text"
               placeholder="标题"
               v-model="memo.title"/>
        <div class="dropdown select-category">
          <button class="btn btn-default dropdown-toggle"
                  data-toggle="dropdown">
            <span class="category">{{ this.$store.state.actHelp.getCategoryName(memo.categoryId) }}</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li @click="memo.categoryId=0">
              <a>工作</a>
            </li>
            <li @click="memo.categoryId=1">
              <a>生活</a>
            </li>
            <li @click="memo.categoryId=2">
              <a>学习</a>
            </li>
          </ul>
        </div>
        <ul class="tools">
          <li class="save"
              @click="saveNew"></li>
          <li class="cancel"
              @click="closeWin"></li>
        </ul>
      </div>
      <textarea class="text-content form-control"
                placeholder="内容"
                v-model="memo.content"></textarea>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import ItemDetail from "@/model/ItemDetail";
  
  @Component
  export default class MemoEdit extends Vue {
    memo: ItemDetail = new ItemDetail(-1, 0)
    
    created(): void {
      this.memo = this.$store.state.transMemo
    }
    
    saveNew(): void {
      // 1. 检验数据
      if (
        this.memo &&
        this.memo.categoryId > -1 &&
        this.memo.title.trim().length > 0 &&
        this.memo.content.trim().length > 0
      ) {
        // 2. 保存数据
        if (this.memo.id <= -1) {
          // 新增
          this.$store.state.actHelp.add(this.memo)
        } else {
          // 修改
          this.$store.state.actHelp.edit(this.memo)
        }
        this.$store.state.isShow = false
      } else {
        alert("请输入数据")
      }
      
    }
    
    closeWin(): void {
      this.$store.state.isShow = false
    }
  }
</script>

<style scoped>

</style>
